<template>
  <a-grid-item :span="{xs: 1, sm: 2, md: 12}">
    <a-collapse :default-active-key="['1']" class="g-collapse">
      <a-collapse-item header="基础信息" key="1">
        <template #extra>
          <a-button-group>
            <a-button type="primary" size="small" @click.stop="edit"  v-auth="['finance:bonusBill:save']" ><icon-edit/>编辑</a-button>
          </a-button-group>
        </template>
        <ma-info :columns="infoColumns" :data="record" layout="horizontal" size="small" :bordered="false"/>
      </a-collapse-item>
    </a-collapse>
  </a-grid-item>
</template>
<script setup>
import {inject, ref} from "vue";
import MaInfo from "@/components/ma-info/index.vue"
import { Message } from '@arco-design/web-vue'
import dictHelp from "@/utils/dicthelp.js";
const crudRef = inject('crudRef')
const record = inject('record')
const edit = ()=>crudRef.value.crudFormRef.edit(record.value)

const infoColumns = ref([
  {
    title: "标题",
    dataIndex: "title",
    formType: "input",
  },
  {
    title: "销售",
    dataIndex: "user_id",
    formType: "select",
    virtualListProps:{},
    dict: {
      url: 'system/user/list',
      props: {label: 'username', value: 'id'},
      translation: true,
      params:{select: 'id,username',role:'xs'}
    },
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "select",
    dict:dictHelp.user
  },
  {
    title: "比例",
    dataIndex: "radio",
    formType: "input",
    customRender: ({record}) => {
      return record.radio + '%'
    }
  },
  {
    title: "毛利总额",
    dataIndex: "total_amount",
    formType: "input",
  },
  {
    title: "可提成总额",
    dataIndex: "bonus_amount",
    formType: "input",
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "input",
  }
])
</script>